<!DOCTYPE HTML>
<html>

<head>
	<title>Escape Velocity by HTML5 UP</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<link rel="stylesheet" href="assets/css/main.css" />
	<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />
	<style>
		/* 去除默认前进后退按钮 */
		.swiper-button-next:after {
			display: none;
		}

		.swiper-button-prev:after {
			display: none;
		}

		.swiper-slide {
			margin-top: -3px;
		}
	</style>
</head>

<body class="homepage is-preload">
	<div id="page-wrapper">

		<section id="swiper-container">
			<div class="swiper" id="swiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide home-swiper-full">
					</div>
					<div class="swiper-slide">Slide 2</div>
					<div class="swiper-slide">Slide 3</div>
				</div>

				<div class="swiper-button-prev arrowCard">next</div>
				<div class="swiper-button-next arrowCard">prev</div>

			</div>
			<nav id="nav">
				<div>
					<div id="logo"><img src="images/logo.png" alt=""></div>
					<ul>
						<li class="current"><a href="index.html">首页</a></li>
						<li><a href="left-sidebar.html">产品体系</a></li>
						<li><a href="right-sidebar.html">招商加盟</a></li>
						<li><a href="no-sidebar.html">联系我们</a></li>
					</ul>
					<div class="search-box">
						<div class=""><img src="images/home/user.png" alt=""></div>
						<div class="input-box" style="margin-left: 15px;position: relative;">
							<input class="form-control me-2" type="search" />
							<img src="images/home/search.png" alt="" style="position: absolute;top: 23%;left: 10px;" />
						</div>
					</div>
			</nav>

		</section>

		<!-- Intro -->
		<section id="intro" class="wrapper style1">
			<div class="title">The Introduction</div>
			<div class="container">
				<p class="style1">So in case you were wondering what this is all about ...</p>
				<p class="style2">
					Escape Velocity is a free responsive<br class="mobile-hide" />
					site template by <a href="http://html5up.net" class="nobr">HTML5 UP</a>
				</p>
				<p class="style3">It's <strong>responsive</strong>, built on <strong>HTML5</strong> and
					<strong>CSS3</strong>,
					and released for
					free under the <a href="http://html5up.net/license">Creative Commons Attribution 3.0 license</a>, so
					use it
					for any of
					your personal or commercial projects &ndash; just be sure to credit us!
				</p>
				<ul class="actions">
					<li><a href="#" class="button style3 large">Proceed</a></li>
				</ul>
			</div>
		</section>

		<!-- Main -->
		<section id="main" class="wrapper style2">
			<div class="title">芜湖</div>
			<div class="container">

				<!-- Image -->
				<a href="#" class="image featured">
					<img src="images/pic01.jpg" alt="" />
				</a>

				<!-- Features -->
				<section id="features">
					<header class="style1">
						<h2>Dolor consequat feugiat amet veroeros</h2>
						<p>Feugiat dolor nullam orci pretium phasellus justo</p>
					</header>
					<div class="feature-list">
						<div class="row">
							<div class="col-6 col-12-medium">
								<section>
									<h3 class="icon fa-comment">Mattis velit diam vulputate</h3>
									<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet
										vulputate et magna feugiat
										laoreet vel velit lorem.</p>
								</section>
							</div>
							<div class="col-6 col-12-medium">
								<section>
									<h3 class="icon solid fa-sync">Lorem ipsum dolor sit veroeros</h3>
									<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet
										vulputate et magna feugiat
										laoreet vel velit lorem.</p>
								</section>
							</div>
							<div class="col-6 col-12-medium">
								<section>
									<h3 class="icon fa-image">Pretium phasellus justo lorem</h3>
									<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet
										vulputate et magna feugiat
										laoreet vel velit lorem.</p>
								</section>
							</div>
							<div class="col-6 col-12-medium">
								<section>
									<h3 class="icon solid fa-cog">Tempus sed pretium orci</h3>
									<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet
										vulputate et magna feugiat
										laoreet vel velit lorem.</p>
								</section>
							</div>
							<div class="col-6 col-12-medium">
								<section>
									<h3 class="icon solid fa-wrench">Aliquam consequat et feugiat</h3>
									<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet
										vulputate et magna feugiat
										laoreet vel velit lorem.</p>
								</section>
							</div>
							<div class="col-6 col-12-medium">
								<section>
									<h3 class="icon solid fa-check">Dolore laoreet aliquam mattis</h3>
									<p>Eget mattis at, laoreet vel et velit aliquam diam ante, aliquet sit amet
										vulputate et magna feugiat
										laoreet vel velit lorem.</p>
								</section>
							</div>
						</div>
					</div>
					<ul class="actions special">
						<li><a href="#" class="button style1 large">Get Started</a></li>
						<li><a href="#" class="button style2 large">More Info</a></li>
					</ul>
				</section>

			</div>
		</section>

		<!-- Highlights -->
		<section id="highlights" class="wrapper style3">
			<div class="title">The Endorsements</div>
			<div class="container">
				<div class="row aln-center">
					<div class="col-4 col-12-medium">
						<section class="highlight">
							<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
							<h3><a href="#">Aliquam diam consequat</a></h3>
							<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet
								vulputate mattis
								amet laoreet lorem.</p>
							<ul class="actions">
								<li><a href="#" class="button style1">Learn More</a></li>
							</ul>
						</section>
					</div>
					<div class="col-4 col-12-medium">
						<section class="highlight">
							<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
							<h3><a href="#">Nisl adipiscing sed lorem</a></h3>
							<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet
								vulputate mattis
								amet laoreet lorem.</p>
							<ul class="actions">
								<li><a href="#" class="button style1">Learn More</a></li>
							</ul>
						</section>
					</div>
					<div class="col-4 col-12-medium">
						<section class="highlight">
							<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
							<h3><a href="#">Mattis tempus lorem</a></h3>
							<p>Eget mattis at, laoreet vel amet sed velit aliquam diam ante, dolor aliquet sit amet
								vulputate mattis
								amet laoreet lorem.</p>
							<ul class="actions">
								<li><a href="#" class="button style1">Learn More</a></li>
							</ul>
						</section>
					</div>
				</div>
			</div>
		</section>

		<!-- Footer -->
		<section id="footer" class="wrapper">
			<div class="title">The Rest Of It</div>
			<div class="container">
				<header class="style1">
					<h2>Ipsum sapien elementum portitor?</h2>
					<p>
						Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br />
						Nam pharetra laoreet imperdiet volutpat etiam feugiat.
					</p>
				</header>
				<div class="row">
					<div class="col-6 col-12-medium">

						<!-- Contact Form -->
						<section>
							<form method="post" action="#">
								<div class="row gtr-50">
									<div class="col-6 col-12-small">
										<input type="text" name="name" id="contact-name" placeholder="Name" />
									</div>
									<div class="col-6 col-12-small">
										<input type="text" name="email" id="contact-email" placeholder="Email" />
									</div>
									<div class="col-12">
										<textarea name="message" id="contact-message" placeholder="Message"
											rows="4"></textarea>
									</div>
									<div class="col-12">
										<ul class="actions">
											<li><input type="submit" class="style1" value="Send" /></li>
											<li><input type="reset" class="style2" value="Reset" /></li>
										</ul>
									</div>
								</div>
							</form>
						</section>

					</div>
					<div class="col-6 col-12-medium">

						<!-- Contact -->
						<section class="feature-list small">
							<div class="row">
								<div class="col-6 col-12-small">
									<section>
										<h3 class="icon solid fa-home">Mailing Address</h3>
										<p>
											Untitled Corp<br />
											1234 Somewhere Rd<br />
											Nashville, TN 00000
										</p>
									</section>
								</div>
								<div class="col-6 col-12-small">
									<section>
										<h3 class="icon solid fa-comment">Social</h3>
										<p>
											<a href="#">@untitled-corp</a><br />
											<a href="#">linkedin.com/untitled</a><br />
											<a href="#">facebook.com/untitled</a>
										</p>
									</section>
								</div>
								<div class="col-6 col-12-small">
									<section>
										<h3 class="icon solid fa-envelope">Email</h3>
										<p>
											<a href="#">info@untitled.tld</a>
										</p>
									</section>
								</div>
								<div class="col-6 col-12-small">
									<section>
										<h3 class="icon solid fa-phone">Phone</h3>
										<p>
											(000) 555-0000
										</p>
									</section>
								</div>
							</div>
						</section>

					</div>
				</div>
				<div id="copyright">
					<ul>
						<li>&copy; Untitled.</li>
						<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
					</ul>
				</div>
			</div>
		</section>

	</div>

	<!-- Scripts -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/jquery.dropotron.min.js"></script>
	<script src="assets/js/browser.min.js"></script>
	<script src="assets/js/breakpoints.min.js"></script>
	<script src="assets/js/util.js"></script>
	<script src="assets/js/main.js"></script>
	<script src="assets/js/swiper-bundle.min.js"></script>

	<script>
		let originalState = true
		var mySwiper = new Swiper('.swiper', {
			// direction: 'vertical', // 垂直切换选项
			loop: false, // 循环模式选项
			grabCursor: true,
			effect: 'slide', //切换效果：默认为“位移切换”。
			//自动切换
			// autoplay: {
			// 	delay: 2500,
			// 	disableOnInteraction: false,
			// },
			// // 如果需要分页器
			// pagination: {
			// 	el: '.swiper-pagination',
			// },

			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
				hiddenClass: "my-button-hidden", //隐藏时的class
				disabledClass: 'my-button-disabled', //不可用时的class
			},
		})

		// 监听slideChange事件来检查是否到达了边界
		mySwiper.on('slideChange', function () {
			if (this.isBeginning) {
				originalState = true
				console.log('这是第一页');
			}
			if (this.isEnd) {
				originalState = false
				console.log('这是最后一页');
			}
		});
	</script>

	</script>

</body>

</html>